import React, { useState, useMemo } from "react";
import { Page, useNavigate } from "zmp-ui";
import { useI18n } from "../i18n";
import { faqData } from "../data/faqData";
import { FaqQuestionItem, FaqCategory } from "../types/faq";
import Navbar from "../components/navbar";
import customerServiceIcon from "../assets/img/help/ic_customer.svg";

const HelpPage: React.FunctionComponent = () => {
  const { t, locale } = useI18n();
  const navigate = useNavigate();
  const [selectedCategory, setSelectedCategory] = useState<FaqCategory>('rentalOrder');
  const [showContactDialog, setShowContactDialog] = useState(false);

  // 分类配置
  const categories = [
    { key: 'rentalOrder' as FaqCategory, label: t("help.rentalOrder") },
    { key: 'payment' as FaqCategory, label: t("help.payment") },
    { key: 'device' as FaqCategory, label: t("help.device") },
    { key: 'others' as FaqCategory, label: t("help.others") }
  ];

  // 根据选择的分类过滤FAQ数据
  const filteredFaqData = useMemo(() => {
    const categoryTypeMap = {
      'rentalOrder': 1,
      'payment': 2,
      'device': 3,
      'others': 4
    };
    
    const type = categoryTypeMap[selectedCategory];
    return faqData.filter(item => item.type === type);
  }, [selectedCategory]);

  // 处理FAQ项目点击
  const handleFaqClick = (item: FaqQuestionItem) => {
    navigate('/help-detail', { state: { faqItem: item } });
  };

  // 处理意见反馈点击
  const handleFeedbackClick = () => {
    navigate('/feedback');
  };

  // 处理客服联系点击
  const handleCustomerServiceClick = () => {
    setShowContactDialog(true);
  };

  // 处理复制到剪贴板
  const handleCopyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text).then(() => {
      // 可以添加一个提示消息
      console.log("已复制到剪贴板:", text);
    }).catch(err => {
      console.error("复制失败:", err);
    });
  };

  return (
    <>
      <style>
        {`
          .help-page::-webkit-scrollbar {
            display: none;
          }
        `}
      </style>
      <Page className="page help-page" style={{ 
        padding: 0, 
        background: '#f5f5f7',
        overflow: 'auto',
        scrollbarWidth: 'none', // Firefox
        msOverflowStyle: 'none' // IE and Edge
      }}>
      {/* 顶部导航栏 */}
      <div style={{ position: 'sticky', top: 0, zIndex: 100 }}>
        <Navbar 
          title={t("help.title")} 
          rightContent={
            <div
              onClick={() => setShowContactDialog(true)}
              style={{
                width: 24,
                height: 24,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer'
              }}
            >
              <img 
                src={customerServiceIcon} 
                alt="Customer Service" 
                style={{ 
                  width: 24, 
                  height: 24
                }} 
              />
            </div>
          }
        />
      </div>

      {/* 问候语和反馈区域 */}
      <div style={{
        padding: '28px 28px 14px 28px',
        backgroundColor: '#fff',
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between'
      }}>
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: 28,
            fontWeight: 'bold',
            color: '#39404D',
            marginBottom: 4
          }}>
            {t("help.hello")}
          </div>
          <div style={{
            fontSize: 12,
            color: '#66666B',
            fontFamily: 'sans-serif-medium'
          }}>
            {t("help.pbHappyHelp")}
          </div>
        </div>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          cursor: 'pointer',
          paddingTop: 10,
          paddingBottom: 10
        }} onClick={handleFeedbackClick}>
          <span style={{
            fontSize: 14,
            color: '#39404D',
            fontFamily: 'sans-serif-medium',
            marginRight: 8
          }}>
            {t("help.feedback")}
          </span>
          <span style={{ fontSize: 16, color: '#999' }}>›</span>
        </div>
      </div>

      {/* 分类标签 */}
      <div style={{
        display: 'flex',
        margin: '14px',
        backgroundColor: '#f0f0f2',
        borderRadius: 8,
        padding: 4
      }}>
        {categories.map((category, index) => (
          <div
            key={category.key}
            onClick={() => setSelectedCategory(category.key)}
            style={{
              flex: 1,
              padding: '8px 12px',
              textAlign: 'center',
              borderRadius: 6,
              cursor: 'pointer',
              backgroundColor: selectedCategory === category.key ? '#fff' : 'transparent',
              color: selectedCategory === category.key ? '#39404D' : '#999',
              fontSize: 14,
              fontWeight: 'bold',
              transition: 'all 0.2s',
              boxShadow: selectedCategory === category.key ? '0 2px 4px rgba(0,0,0,0.1)' : 'none'
            }}
          >
            {category.label}
          </div>
        ))}
      </div>

      {/* FAQ列表 */}
      <div style={{
        padding: '0 14px 40px 14px'
      }}>
        {filteredFaqData.map((item, index) => (
          <div
            key={item.id}
            onClick={() => handleFaqClick(item)}
            style={{
              backgroundColor: '#fff',
              borderRadius: 14,
              padding: '10px 14px',
              marginBottom: 10,
              cursor: 'pointer',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              transition: 'transform 0.2s'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-2px)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
            }}
          >
            <div style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}>
              <span style={{
                fontSize: 14,
                color: '#39404D',
                fontFamily: 'sans-serif-medium',
                flex: 1,
                lineHeight: 1.4
              }}>
                {item.title}
              </span>
              <div style={{
                width: 48,
                height: 48,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}>
                <span style={{ fontSize: 16, color: '#999' }}>›</span>
              </div>
            </div>
          </div>
        ))}
      </div>


      {/* 联系对话框 */}
      {showContactDialog && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            backgroundColor: '#fff',
            borderRadius: 12,
            padding: 20,
            margin: 20,
            minWidth: 280,
            maxWidth: 400,
            position: 'relative'
          }}>
            {/* 关闭按钮 */}
            <div
              onClick={() => setShowContactDialog(false)}
              style={{
                position: 'absolute',
                top: 12,
                right: 12,
                width: 24,
                height: 24,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                fontSize: 18,
                color: '#999'
              }}
            >
              ×
            </div>

            {/* WhatsApp联系 */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px 0',
              borderBottom: '1px solid #f0f0f0'
            }}>
              <div style={{
                width: 40,
                height: 40,
                backgroundColor: '#25D366',
                borderRadius: 8,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginRight: 12
              }}>
                <span style={{ fontSize: 20, color: '#fff' }}>📱</span>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontSize: 14,
                  color: '#333',
                  fontWeight: '500'
                }}>
                  WhatsApp
                </div>
                <div
                  onClick={() => handleCopyToClipboard('0835001799')}
                  style={{
                    fontSize: 14,
                    color: '#007AFF',
                    textDecoration: 'underline',
                    cursor: 'pointer'
                  }}
                >
                  0835001799
                </div>
              </div>
            </div>

            {/* 邮箱联系 */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px 0'
            }}>
              <div style={{
                width: 40,
                height: 40,
                backgroundColor: '#333',
                borderRadius: 20,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginRight: 12
              }}>
                <span style={{ fontSize: 18, color: '#fff' }}>✉️</span>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontSize: 14,
                  color: '#333',
                  fontWeight: '500'
                }}>
                  Email
                </div>
                <div style={{
                  display: 'flex',
                  alignItems: 'center'
                }}>
                  <div
                    onClick={() => handleCopyToClipboard('youdianstar@gmail.com')}
                    style={{
                      fontSize: 14,
                      color: '#007AFF',
                      textDecoration: 'underline',
                      cursor: 'pointer',
                      marginRight: 8
                    }}
                  >
                    youdianstar@gmail.com
                  </div>
                  <div
                    onClick={() => handleCopyToClipboard('youdianstar@gmail.com')}
                    style={{
                      width: 16,
                      height: 16,
                      cursor: 'pointer',
                      fontSize: 12,
                      color: '#999'
                    }}
                  >
                    📋
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
      </Page>
    </>
  );
};

export default HelpPage;
